<template>
    <div class="group">
        <div class="container">
            <div class="container-header">
                <h4>
                    {{ cityName ? cityName + "-" : "" }}全镇乡村资源视图
                </h4>
                <button @click="handleRouterHome()">
                    {{ $route.query.cityCode ? "返回区域视图" : "进入菜单" }}
                </button>
            </div>
            <div class="text">
                <ul>
                    <li>
                        <p>{{ dataList.townOverview.dwd.village || 0 }}</p>
                        <span>村</span>
                    </li>
                    <li>
                        <p>{{ dataList.townOverview.dwd.team || 0 }}</p>
                        <span>队(组)</span>
                    </li>
                    <li>
                        <p>{{ dataList.townOverview.dwd.family || 0 }}</p>
                        <span>户</span>
                    </li>
                    <li>
                        <p>{{ dataList.townOverview.dwd.human || 0 }}</p>
                        <span>人</span>
                    </li>
                    <li class="line"></li>
                    <li>
                        <p>{{ dataList.townOverview.dwd.mountain || 0 }}</p>
                        <span>山</span>
                    </li>
                    <li>
                        <p>{{ dataList.townOverview.dwd.water || 0 }}</p>
                        <span>水</span>
                    </li>
                    <li>
                        <p>{{ dataList.townOverview.dwd.linpan || 0 }}</p>
                        <span>林盘</span>
                    </li>
                    <li>
                        <p>{{ dataList.townOverview.dwd.house || 0 }}</p>
                        <span>房产</span>
                    </li>
                    <li>
                        <p>
                            {{ dataList.townOverview.dwd.land || 0
                            }}<font>块</font>
                        </p>
                        <span>建设用地</span>
                    </li>
                    <li class="line"></li>
                    <li>
                        <p>
                            {{
                                dataList.townOverview
                                    ? dataList.townOverview.project
                                          .countNoFinish
                                        ? dataList.townOverview.project
                                              .countNoFinish
                                        : 0
                                    : 0
                            }}
                        </p>
                        <span>在建项目</span>
                    </li>
                    <li>
                        <p>{{ dataList.townOverview.dwd.industry || 0 }}</p>
                        <span>企业</span>
                    </li>
                    <li>
                        <p>{{ dataList.townOverview.dwd.service || 0 }}</p>
                        <span>个体户</span>
                    </li>
                </ul>
            </div>
            <div class="container-body">
                <div class="container-body-left">
                    <div class="family">
                        <h4 class="title">户</h4>
                        <ul>
                            <li>
                                <span>贫困家庭：</span>
                                <font>{{
                                    dataList.family.data["贫困家庭"] || 0
                                }}</font>
                            </li>
                            <li>
                                <span>军属家庭：</span>
                                <font>{{
                                    dataList.family.data["军属家庭"] || 0
                                }}</font>
                            </li>
                            <li>
                                <span>低保家庭：</span>
                                <font>{{
                                    dataList.family.data["低保家庭"] || 0
                                }}</font>
                            </li>
                            <li>
                                <span>单亲家庭：</span>
                                <font>{{
                                    dataList.family.data["单亲家庭"] || 0
                                }}</font>
                            </li>
                            <li>
                                <span>失孤家庭：</span>
                                <font>{{
                                    dataList.family.data["失孤家庭"] || 0
                                }}</font>
                            </li>
                            <li>
                                <span>独生子女家庭：</span>
                                <font>{{
                                    dataList.family.data["独生子女家庭"] || 0
                                }}</font>
                            </li>
                        </ul>
                    </div>
                    <div class="person">
                        <h4 class="title">人</h4>
                        <ul>
                            <li>
                                <span>残疾人：</span>
                                <font>{{
                                    dataList.human.data["残疾人"] || 0
                                }}</font>
                            </li>
                            <li>
                                <span>留守儿童：</span>
                                <font>{{
                                    dataList.human.data["留守儿童"] || 0
                                }}</font>
                            </li>
                            <li>
                                <span>60岁以上老人：</span>
                                <font>{{
                                    dataList.human.data["60岁以上老人"] || 0
                                }}</font>
                            </li>
                            <li>
                                <span>妇女：</span>
                                <font>{{
                                    dataList.human.data["妇女"] || 0
                                }}</font>
                            </li>
                            <li>
                                <span>80岁以上老人：</span>
                                <font>{{
                                    dataList.human.data["80岁以上老人"] || 0
                                }}</font>
                            </li>
                            <li>
                                <span>退役军人：</span>
                                <font>{{
                                    dataList.human.data["退役军人"] || 0
                                }}</font>
                            </li>
                        </ul>
                    </div>
                    <div class="left-view">
                        <h4 class="title">各村人口分布</h4>
                        <div ref="left-echarts" class="left-echarts"></div>
                    </div>
                </div>
                <div class="container-body-center">
                    <div class="economy">
                        <h4 class="title">经济</h4>
                        <div class="economy-view">
                            <div
                                ref="economy-view-left"
                                class="economy-view-left"
                            ></div>
                            <div
                                ref="economy-view-right"
                                class="economy-view-right"
                            ></div>
                        </div>
                    </div>
                    <div class="industry">
                        <h4 class="title">产业</h4>
                        <div class="industry-view">
                            <div
                                ref="industry-view-left"
                                class="industry-view-left"
                            ></div>
                            <div
                                ref="industry-view-center"
                                class="industry-view-center"
                            ></div>
                            <div
                                ref="industry-view-right"
                                class="industry-view-right"
                            ></div>
                        </div>
                    </div>
                    <div class="project">
                        <h4 class="title">项目</h4>
                        <div class="wrap">
                            <div class="tag">
                                <p>项目统计</p>
                                <ul>
                                    <!--                                    <li>
                                        <p>
                                            {{ dataList.project.numInvestment }}
                                        </p>
                                        <font>招商项目</font>
                                    </li>-->
                                    <li>
                                        <p>{{ dataList.project.numBuild }}</p>
                                        <font>工程建设项目</font>
                                    </li>
                                    <li>
                                        <p>
                                            {{ dataList.project.numLivelihood }}
                                        </p>
                                        <font>民生服务<br />项目数</font>
                                    </li>
                                </ul>
                            </div>
                            <div ref="project-view" class="project-view"></div>
                        </div>
                    </div>
                </div>
                <div class="container-body-right">
                    <div class="land">
                        <h4 class="title">土地</h4>
                        <ul>
                            <li>
                                <i></i>
                                <div>
                                    <p>建设用地:</p>
                                    <h5>
                                        <font>{{
                                            dataList.land.data["建设用地"][1]
                                        }}</font
                                        >块
                                        <font>{{
                                            dataList.land.data["建设用地"][0]
                                        }}</font
                                        >亩
                                    </h5>
                                </div>
                            </li>
                            <li>
                                <i></i>
                                <div>
                                    <p>林地:</p>
                                    <h5>
                                        <font>{{
                                            dataList.land.data["林地"][1]
                                        }}</font
                                        >块
                                    </h5>
                                </div>
                            </li>
                            <li>
                                <i></i>
                                <div>
                                    <p>耕地:</p>
                                    <h5>
                                        <font>{{
                                            dataList.land.data["耕地"][0]
                                        }}</font
                                        >亩
                                    </h5>
                                </div>
                            </li>
                            <li>
                                <i></i>
                                <div>
                                    <p>果园:</p>
                                    <h5>
                                        <font>{{
                                            dataList.land.data["园地"][0]
                                        }}</font
                                        >亩
                                    </h5>
                                </div>
                            </li>
                            <li>
                                <i></i>
                                <div>
                                    <p>其它:</p>
                                    <h5>
                                        <font>{{
                                            dataList.land.data["其他"][0]
                                        }}</font
                                        >亩
                                    </h5>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="food">
                        <h4 class="title">粮食&农产品</h4>
                        <ul>
                            <li>
                                <i></i>
                                <div>
                                    <p>粮食面积:</p>
                                    <h5>
                                        <font>{{
                                            dataList.agriculture.data[
                                                "粮食面积"
                                            ] || 0
                                        }}</font
                                        >亩
                                    </h5>
                                </div>
                            </li>
                            <li>
                                <i></i>
                                <div>
                                    <p>畜牧数量:</p>
                                    <h5>
                                        <font>{{
                                            dataList.agriculture.data[
                                                "畜牧数量"
                                            ] || 0
                                        }}</font
                                        >头
                                    </h5>
                                </div>
                            </li>
                            <li>
                                <i></i>
                                <div>
                                    <p>蔬菜面积:</p>
                                    <h5>
                                        <font>{{
                                            dataList.agriculture.data[
                                                "蔬菜面积"
                                            ] || 0
                                        }}</font
                                        >亩
                                    </h5>
                                </div>
                            </li>
                            <li>
                                <i></i>
                                <div>
                                    <p>渔业面积:</p>
                                    <h5>
                                        <font>{{
                                            dataList.agriculture.data[
                                                "渔业面积"
                                            ] || 0
                                        }}</font
                                        >亩
                                    </h5>
                                </div>
                            </li>
                            <li>
                                <i></i>
                                <div>
                                    <p>苗木面积:</p>
                                    <h5>
                                        <font>{{
                                            dataList.agriculture.data[
                                                "苗木面积"
                                            ] || 0
                                        }}</font
                                        >亩
                                    </h5>
                                </div>
                            </li>
                            <li>
                                <i></i>
                                <div>
                                    <p>瓜果面积:</p>
                                    <h5>
                                        <font>{{
                                            dataList.agriculture.data[
                                                "瓜果面积"
                                            ] || 0
                                        }}</font
                                        >亩
                                    </h5>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="house">
                        <h4 class="title">房产现状</h4>
                        <div ref="house-view" class="house-view"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import * as echarts from "echarts";
import { State } from "vuex-class";
@Component({
    name: "TownView"
})
export default class TownView extends Vue {
    @State(state => state.user.userInfo) user: any;
    @State(state => state.authArea) authArea: any;
    dataList = {
        agriculture: {
            data: {
                渔业面积: 0,
                瓜果面积: 0,
                畜牧数量: 0,
                粮食面积: 0,
                苗木面积: 0,
                蔬菜面积: 0
            }
        },
        economy: {},
        family: {
            data: {
                低保家庭: "",
                军属家庭: "",
                单亲家庭: "",
                失孤家庭: "",
                独生子女家庭: "",
                贫困家庭: ""
            }
        },
        house: {},
        human: {
            data: {
                "60岁以上老人": "",
                "80岁以上老人": "",
                妇女: "",
                残疾人: "",
                留守儿童: "",
                退役军人: ""
            }
        },
        industry: {
            eco1: [],
            industry: [],
            service: []
        },
        land: {
            data: {
                其他: [0, 0],
                园地: [0, 0],
                建设用地: [0, 0],
                林地: [0, 0],
                耕地: [0, 0]
            }
        },
        project: {},
        townOverview: {
            dwd: {
                family: 0,
                house: 0,
                human: 0,
                industry: 0,
                land: 0,
                linpan: 0,
                service: 0,
                team: 0,
                village: 0,
                farmland: 0,
                specialIndustry: 0,
                farmBase: 0,
                mountain: 0,
                water: 0
            },
            project: {
                countNoFinish: 0,
                count: 0
            }
        },
        village: {}
    };

    get currentArea() {
        const _current: any = this.currentAreaList;
        return _current && _current.id !== "0" ? _current.areaName || "" : "";
    }

    get currentAreaList() {
        const _current: any = this.authHistoryList[
            this.authHistoryList.length - 1
        ];
        return _current || {};
    }

    get authHistoryList() {
        const authHistory: any = this.$store.getters.getAuthHistory;
        return (authHistory && authHistory.list) || [];
    }

    get cityName() {
        if (this.$route.query.townName) {
            return this.$route.query.townName;
        } else {
            return this.currentArea;
        }
    }

    mounted() {
        this.getTownData();
    }

    // 获取全镇视图数据;
    async getTownData() {
        const res = await this.$server["townView/town-view"]({
            data: {
                cityCode: this.$route.query.cityCode
                    ? this.$route.query.cityCode
                    : this.authArea.cityCode
            }
        });
        if (res.data.code === 200) {
            this.dataList = res.data.data;
            this.$nextTick(() => {
                this.setEcharts(this.dataList);
            });
        }
    }

    // 基于准备好的dom，初始化echarts实例
    setEcharts(dataList: any) {
        // 最左侧的各村人口分布
        const ChartOne: any = this.$refs["left-echarts"];
        if (ChartOne) {
            const nameList: any[] = [];
            const ageList18: any[] = [];
            const ageList35: any[] = [];
            const ageList60: any[] = [];
            const ageList80: any[] = [];
            const ageList120: any[] = [];
            if (dataList.village.data) {
                dataList.village.data.forEach((item: any) => {
                    nameList.push(item.name);
                    ageList18.push(item.num18);
                    ageList35.push(item.num35);
                    ageList60.push(item.num60);
                    ageList80.push(item.num80);
                    ageList120.push(item.num120);
                });
            }
            const leftChart = echarts.init(ChartOne);
            // 最左侧的各村人口分布
            leftChart.setOption({
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        // Use axis to trigger tooltip
                        type: "shadow" // 'shadow' as default; can also be 'line' or 'shadow'
                    }
                },
                legend: {
                    x: "22px",
                    y: "10px",
                    align: "left",
                    itemHeight: 8,
                    itemWidth: 22,
                    textStyle: {
                        fontSize: 12, // 字体大小
                        color: "#ffffff" // 字体颜色
                    },
                    data: [
                        "0-18岁",
                        "18-45岁",
                        "45-60岁",
                        "60-80岁",
                        "80岁以上"
                    ]
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true
                },
                color: ["#07DDF9", "#F3A511", "#FB5470", "#C42643", "#FF3B5F"],
                textStyle: {
                    fontSize: 14,
                    color: "#FFFFFF"
                },
                xAxis: {
                    position: "top",
                    type: "value",
                    splitLine: {
                        color: "#cccccc",
                        lineStyle: {
                            type: "dashed"
                        }
                    }
                },
                yAxis: {
                    type: "category",
                    data: nameList,
                    axisLabel: {
                        formatter: function(value: any) {
                            let res = value;
                            if (res.length > 5) {
                                res = res.substring(0, 4) + "..";
                            }
                            return res;
                        }
                    }
                },
                series: [
                    {
                        name: "0-18岁",
                        type: "bar",
                        stack: "total",
                        label: {
                            show: true
                        },
                        emphasis: {
                            focus: "series"
                        },
                        data: ageList18
                    },
                    {
                        name: "18-45岁",
                        type: "bar",
                        stack: "total",
                        label: {
                            show: true
                        },
                        emphasis: {
                            focus: "series"
                        },
                        data: ageList35
                    },
                    {
                        name: "45-60岁",
                        type: "bar",
                        stack: "total",
                        label: {
                            show: true
                        },
                        emphasis: {
                            focus: "series"
                        },
                        data: ageList60
                    },
                    {
                        name: "60-80岁",
                        type: "bar",
                        stack: "total",
                        label: {
                            show: true
                        },
                        emphasis: {
                            focus: "series"
                        },
                        data: ageList80
                    },
                    {
                        name: "80岁以上",
                        type: "bar",
                        stack: "total",
                        label: {
                            show: true
                        },
                        emphasis: {
                            focus: "series"
                        },
                        data: ageList120
                    }
                ]
            });
            window.addEventListener("resize", function() {
                leftChart.resize(); // 页面大小变化后Echarts也更改大小
            });
        }
        // 经济区局左侧图表
        const centerChart1: any = this.$refs["economy-view-left"];
        if (centerChart1) {
            const dataScore = dataList.economy.data.map((item: any) => {
                return (item / 10000).toFixed(2);
            });
            const centerLeftChart = echarts.init(centerChart1);
            centerLeftChart.setOption({
                grid: {
                    left: "2%",
                    // right: 0,
                    bottom: "10%",
                    containLabel: true
                },
                xAxis: {
                    type: "category",
                    data: dataList.economy.name,
                    splitArea: { show: false },
                    axisLabel: {
                        show: true,
                        interval: 0,
                        lineHeight: 18,
                        formatter: function(params: any) {
                            let newParamsName = ""; // 最终拼接成的字符串
                            const paramsNameNumber = params.length; // 实际标签的个数
                            const provideNumber = 4; // 每行能显示的字的个数
                            const rowNumber = Math.ceil(
                                paramsNameNumber / provideNumber
                            ); // 换行的话，需要显示几行，向上取整
                            // 条件等同于rowNumber>1
                            if (paramsNameNumber > provideNumber) {
                                /** 循环每一行,p表示行 */
                                for (let p = 0; p < rowNumber; p++) {
                                    let tempStr = ""; // 表示每一次截取的字符串
                                    const start = p * provideNumber; // 开始截取的位置
                                    const end = start + provideNumber; // 结束截取的位置
                                    // 此处特殊处理最后一行的索引值
                                    if (p === rowNumber - 1) {
                                        tempStr = params.substring(
                                            start,
                                            paramsNameNumber
                                        );
                                    } else {
                                        // 每一次拼接字符串并换行
                                        tempStr =
                                            params.substring(start, end) + "\n";
                                    }
                                    newParamsName += tempStr; // 最终拼成的字符串
                                }
                            } else {
                                // 将旧标签的值赋给新标签
                                newParamsName = params;
                            }
                            return newParamsName;
                        }
                    }
                },
                yAxis: {
                    type: "value",
                    splitLine: {
                        color: "#cccccc",
                        lineStyle: {
                            type: "dashed"
                        }
                    },
                    axisLabel: {
                        formatter: "{value}万元"
                    }
                },
                textStyle: {
                    fontSize: 14,
                    color: "#FFFFFF"
                },
                series: [
                    {
                        data: dataScore,
                        type: "bar",
                        itemStyle: {
                            color: "#FF3B5F"
                        },
                        label: {
                            show: true,
                            position: "top",
                            formatter: function(val: any) {
                                if (val.value !== 0) {
                                    return val.value;
                                } else {
                                    return "";
                                }
                            },
                            textStyle: {
                                color: "#FF3B5F",
                                fontSize: 12
                            }
                        }
                    }
                ]
            });
            window.addEventListener("resize", function() {
                centerLeftChart.resize(); // 页面大小变化后Echarts也更改大小
            });
        }
        //  经济区局右侧图表
        const centerChart2: any = this.$refs["economy-view-right"];
        if (centerChart2) {
            const centerRightChart = echarts.init(centerChart2);
            centerRightChart.setOption({
                grid: {
                    left: "2%",
                    // right: 0,
                    bottom: "10%",
                    containLabel: true
                },
                xAxis: {
                    type: "category",
                    data: dataList.economy.name2,
                    splitArea: { show: false },
                    axisLabel: {
                        show: true,
                        interval: 0,
                        lineHeight: 18,
                        formatter: function(params: any) {
                            let newParamsName = ""; // 最终拼接成的字符串
                            const paramsNameNumber = params.length; // 实际标签的个数
                            const provideNumber = 2; // 每行能显示的字的个数
                            const rowNumber = Math.ceil(
                                paramsNameNumber / provideNumber
                            ); // 换行的话，需要显示几行，向上取整
                            // 条件等同于rowNumber>1
                            if (paramsNameNumber > provideNumber) {
                                /** 循环每一行,p表示行 */
                                for (let p = 0; p < rowNumber; p++) {
                                    let tempStr = ""; // 表示每一次截取的字符串
                                    const start = p * provideNumber; // 开始截取的位置
                                    const end = start + provideNumber; // 结束截取的位置
                                    // 此处特殊处理最后一行的索引值
                                    if (p === rowNumber - 1) {
                                        tempStr = params.substring(
                                            start,
                                            paramsNameNumber
                                        );
                                    } else {
                                        // 每一次拼接字符串并换行
                                        tempStr =
                                            params.substring(start, end) + "\n";
                                    }
                                    newParamsName += tempStr; // 最终拼成的字符串
                                }
                            } else {
                                // 将旧标签的值赋给新标签
                                newParamsName = params;
                            }
                            return newParamsName;
                        }
                    }
                },
                yAxis: {
                    type: "value",
                    splitLine: {
                        color: "#cccccc",
                        lineStyle: {
                            type: "dashed"
                        }
                    },
                    axisLabel: {
                        formatter: "{value}吨"
                    }
                },
                textStyle: {
                    fontSize: 14,
                    color: "#FFFFFF"
                },
                series: [
                    {
                        data: dataList.economy.data2,
                        type: "bar",
                        itemStyle: {
                            color: "#FF3B5F"
                        },
                        label: {
                            show: true,
                            position: "top",
                            formatter: function(val: any) {
                                if (val.value !== 0) {
                                    return val.value;
                                } else {
                                    return "";
                                }
                            },
                            textStyle: {
                                color: "#FF3B5F",
                                fontSize: 12
                            }
                        }
                    }
                ]
            });
            window.addEventListener("resize", function() {
                centerRightChart.resize(); // 页面大小变化后Echarts也更改大小
            });
        }
        // 产业区域最左侧图表
        const industryChart1: any = this.$refs["industry-view-left"];
        if (industryChart1) {
            const typeList: any[] = [];
            const valList: any[] = [];
            dataList.industry.eco1.forEach((item: any) => {
                typeList.push(item.type);
                valList.push({
                    name: item.type,
                    value: item.num
                });
            });
            const industryLeftChart = echarts.init(industryChart1);
            industryLeftChart.setOption({
                tooltip: {
                    trigger: "item"
                },
                color: ["#07DDF9", "#6AD669", "#F3A511", "#FF3B5F"],
                legend: {
                    bottom: 30,
                    itemHeight: 8,
                    itemWidth: 25,
                    itemGap: 10,
                    left: "center",
                    data: typeList,
                    textStyle: {
                        fontSize: 14, // 字体大小
                        color: "#ffffff" // 字体颜色
                    }
                },
                series: [
                    {
                        // name: "访问来源",
                        type: "pie",
                        radius: ["40%", "70%"],
                        center: ["50%", "40%"],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: "center"
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: "16",
                                color: "#FFFFFF"
                            }
                        },
                        labelLine: {
                            show: true
                        },
                        data: valList
                    }
                ]
            });
            window.addEventListener("resize", function() {
                industryLeftChart.resize(); // 页面大小变化后Echarts也更改大小
            });
        }
        // 产业区域中间图表
        const industryChart2: any = this.$refs["industry-view-center"];
        if (industryChart2) {
            const typeList: any[] = [];
            const valList: any[] = [];
            dataList.industry.industry.forEach((item: any) => {
                typeList.push(item.type);
                valList.push({
                    name: item.type,
                    value: item.num
                });
            });
            const industryCenterChart = echarts.init(industryChart2);
            industryCenterChart.setOption({
                tooltip: {
                    trigger: "item"
                },
                color: [
                    "#07DDF9",
                    "#6AD669",
                    "#F3A511",
                    "#FF3B5F",
                    "#874AC1",
                    "#972587"
                ],
                legend: {
                    left: "center",
                    orient: "horizontal",
                    bottom: 8,
                    itemHeight: 8,
                    itemWidth: 25,
                    itemGap: 10,
                    data: typeList,
                    textStyle: {
                        fontSize: 14, // 字体大小
                        color: "#ffffff" // 字体颜色
                    },
                    formatter: function(params: any) {
                        let newParamsName = ""; // 最终拼接成的字符串
                        const paramsNameNumber = params.length; // 实际标签的个数
                        const provideNumber = 4; // 每行能显示的字的个数
                        const rowNumber = Math.ceil(
                            paramsNameNumber / provideNumber
                        ); // 换行的话，需要显示几行，向上取整
                        // 条件等同于rowNumber>1
                        if (paramsNameNumber > provideNumber) {
                            /** 循环每一行,p表示行 */
                            for (let p = 0; p < rowNumber; p++) {
                                let tempStr = ""; // 表示每一次截取的字符串
                                const start = p * provideNumber; // 开始截取的位置
                                const end = start + provideNumber; // 结束截取的位置
                                // 此处特殊处理最后一行的索引值
                                if (p === rowNumber - 1) {
                                    tempStr = params.substring(
                                        start,
                                        paramsNameNumber
                                    );
                                } else {
                                    // 每一次拼接字符串并换行
                                    tempStr =
                                        params.substring(start, end) + "\n";
                                }
                                newParamsName += tempStr; // 最终拼成的字符串
                            }
                        } else {
                            // 将旧标签的值赋给新标签
                            newParamsName = params;
                        }
                        return newParamsName;
                    }
                },
                series: [
                    {
                        // name: "访问来源",
                        type: "pie",
                        radius: ["40%", "70%"],
                        center: ["50%", "40%"],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: "center"
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: "14",
                                color: "#FFFFFF"
                            }
                        },
                        labelLine: {
                            show: true
                        },
                        data: valList
                    }
                ]
            });
            window.addEventListener("resize", function() {
                industryCenterChart.resize(); // 页面大小变化后Echarts也更改大小
            });
        }
        // 产业区域最右侧图表
        const industryChart3: any = this.$refs["industry-view-right"];
        if (industryChart3) {
            const typeList: any[] = [];
            const valList: any[] = [];
            dataList.industry.service.forEach((item: any) => {
                typeList.push(item.type);
                valList.push({
                    name: item.type,
                    value: item.num
                });
            });
            const industryRightChart = echarts.init(industryChart3);
            industryRightChart.setOption({
                tooltip: {
                    trigger: "item"
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    top: "3%",
                    containLabel: true
                },
                color: ["#07DDF9", "#6AD669", "#F3A511", "#FF3B5F", "#874AC1"],
                legend: {
                    bottom: 38,
                    left: "center",
                    itemHeight: 8,
                    itemWidth: 25,
                    itemGap: 6,
                    data: typeList,
                    textStyle: {
                        fontSize: 14, // 字体大小
                        color: "#ffffff" // 字体颜色
                    },
                    formatter: function(params: any) {
                        let newParamsName = ""; // 最终拼接成的字符串
                        const paramsNameNumber = params.length; // 实际标签的个数
                        const provideNumber = 8; // 每行能显示的字的个数
                        const rowNumber = Math.ceil(
                            paramsNameNumber / provideNumber
                        ); // 换行的话，需要显示几行，向上取整
                        // 条件等同于rowNumber>1
                        if (paramsNameNumber > provideNumber) {
                            /** 循环每一行,p表示行 */
                            for (let p = 0; p < rowNumber; p++) {
                                let tempStr = ""; // 表示每一次截取的字符串
                                const start = p * provideNumber; // 开始截取的位置
                                const end = start + provideNumber; // 结束截取的位置
                                // 此处特殊处理最后一行的索引值
                                if (p === rowNumber - 1) {
                                    tempStr = params.substring(
                                        start,
                                        paramsNameNumber
                                    );
                                } else {
                                    // 每一次拼接字符串并换行
                                    tempStr =
                                        params.substring(start, end) + "\n";
                                }
                                newParamsName += tempStr; // 最终拼成的字符串
                            }
                        } else {
                            // 将旧标签的值赋给新标签
                            newParamsName = params;
                        }
                        return newParamsName;
                    }
                },
                series: [
                    {
                        // name: "访问来源",
                        type: "pie",
                        radius: ["40%", "70%"],
                        center: ["50%", "40%"],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: "center"
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: "16",
                                color: "#FFFFFF"
                            }
                        },
                        labelLine: {
                            show: true
                        },
                        data: valList
                    }
                ]
            });
            window.addEventListener("resize", function() {
                industryRightChart.resize(); // 页面大小变化后Echarts也更改大小
            });
        }
        // 项目视图
        const projectChart: any = this.$refs["project-view"];
        if (projectChart) {
            const projectViewChart = echarts.init(projectChart);
            projectViewChart.setOption({
                grid: {
                    left: "2%",
                    // right: 0,
                    bottom: "10%",
                    containLabel: true
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        // 坐标轴指示器，坐标轴触发有效
                        type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                xAxis: {
                    type: "category",
                    data: dataList.project.name,
                    splitArea: { show: false },
                    axisLabel: {
                        show: false,
                        interval: 0,
                        lineHeight: 18,
                        formatter: function(params: any) {
                            if (params.length > 4) {
                                params = params.substring(0, 9) + "...";
                            }
                            let newParamsName = ""; // 最终拼接成的字符串
                            const paramsNameNumber = params.length; // 实际标签的个数
                            const provideNumber = 3; // 每行能显示的字的个数
                            const rowNumber = Math.ceil(
                                paramsNameNumber / provideNumber
                            ); // 换行的话，需要显示几行，向上取整
                            // 条件等同于rowNumber>1
                            if (paramsNameNumber > provideNumber) {
                                /** 循环每一行,p表示行 */
                                for (let p = 0; p < rowNumber; p++) {
                                    let tempStr = ""; // 表示每一次截取的字符串
                                    const start = p * provideNumber; // 开始截取的位置
                                    const end = start + provideNumber; // 结束截取的位置
                                    // 此处特殊处理最后一行的索引值
                                    if (p === rowNumber - 1) {
                                        tempStr = params.substring(
                                            start,
                                            paramsNameNumber
                                        );
                                    } else {
                                        // 每一次拼接字符串并换行
                                        tempStr =
                                            params.substring(start, end) + "\n";
                                    }
                                    newParamsName += tempStr; // 最终拼成的字符串
                                }
                            } else {
                                // 将旧标签的值赋给新标签
                                newParamsName = params;
                            }
                            return newParamsName;
                        }
                    }
                },
                yAxis: {
                    type: "value",
                    splitLine: {
                        color: "#cccccc",
                        lineStyle: {
                            type: "dashed"
                        }
                    }
                },
                textStyle: {
                    fontSize: 14,
                    color: "#FFFFFF"
                },
                series: [
                    {
                        data: dataList.project.data,
                        type: "bar",
                        itemStyle: {
                            color: "#FF3B5F"
                        },
                        label: {
                            show: true,
                            position: "top",
                            formatter: function(val: any) {
                                if (val.value !== 0) {
                                    return val.value + "%";
                                } else {
                                    return "";
                                }
                            },
                            textStyle: {
                                color: "#FF3B5F",
                                fontSize: 12
                            }
                        }
                    }
                ]
            });
            window.addEventListener("resize", function() {
                projectViewChart.resize(); // 页面大小变化后Echarts也更改大小
            });
        }
        // 房产图表
        const houseDom: any = this.$refs["house-view"];
        if (houseDom) {
            const houseChart = echarts.init(houseDom);
            let nameList: any[] = [];
            let valList;
            if (dataList.house.data) {
                nameList = Object.keys(dataList.house.data);
                valList = [
                    {
                        name: "自用",
                        value: dataList.house.data["自用"]
                    },
                    {
                        name: "空置",
                        value: dataList.house.data["空置"]
                    },
                    {
                        name: "已出租出售",
                        value: dataList.house.data["已出租出售"]
                    }
                ];
            }
            houseChart.setOption({
                color: ["#07DDF9", "#F3A511", "#FF3B5F"],
                textStyle: {
                    fontSize: 14,
                    color: "#FFFFFF"
                },
                tooltip: {
                    trigger: "item"
                },
                legend: {
                    orient: "vertical",
                    x: "300px",
                    top: "center",
                    data: nameList,
                    itemHeight: 8,
                    itemWidth: 25,
                    itemGap: 10,
                    textStyle: {
                        fontSize: 14, // 字体大小
                        color: "#ffffff" // 字体颜色
                    }
                },
                series: [
                    {
                        type: "pie",
                        radius: "50%",
                        data: valList,
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        }
                    }
                ]
            });
            window.addEventListener("resize", function() {
                houseChart.resize(); // 页面大小变化后Echarts也更改大小
            });
        }
    }

    // 跳转到主页
    handleRouterHome() {
        if (this.$route.query.cityCode) {
            this.$router.push({ name: "resource-view" });
        } else {
            this.$router.push({ name: "home" });
        }
    }
}
</script>

<style lang="scss" scoped>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.group {
    width: 100%;
    height: 100%;
    overflow-y: auto;
}
.container {
    width: 100%;
    min-width: 1200px;
    position: relative;
    background-image: url("~@/assets/town-header.png");
    background-size: 100% 96px;
    background-position: center top;
    background-repeat: no-repeat;
    background-color: #000000;
    overflow: hidden;
    &-header {
        width: 100%;
        height: 1.2rem;
        position: relative;
        padding: 0 0.2rem;
        display: flex;
        justify-content: center;
        align-items: center;
        h4 {
            color: #fff;
            font-size: 0.32rem;
        }
        button {
            position: absolute;
            right: 0.2rem;
            background-image: url("~@/assets/btn-bg02.png");
            background-color: rgba(197, 196, 224, 0.08);
            background-size: cover;
            padding: 0.05rem 0.2rem;
            font-size: 0.18rem;
            font-weight: 400;
            color: #fff;
            border: none;
            cursor: pointer;
            outline: none;
            border-radius: 4px;
            overflow: hidden;
        }
    }
    .text {
        width: 100%;
        padding: 0 1.36rem;
        height: 80px;
        ul {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 100%;
            li {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                p {
                    font-size: 0.38rem;
                    font-weight: bold;
                    color: #00a2ff;
                    font {
                        font-size: 0.2rem;
                        font-weight: normal;
                    }
                }
                span {
                    font-size: 0.2rem;
                    font-weight: normal;
                    color: #f5f5f5;
                }
                &.line {
                    background: #4f4f54;
                    width: 1px;
                    height: 80px;
                }
            }
        }
    }
    .title {
        color: #c9c9c9;
        width: 2.04rem;
        height: 0.3rem;
        line-height: 0.3rem;
        font-size: 0.18rem;
        margin-left: 0.22rem;
        padding-left: 0.36rem;
        position: relative;
        background-image: url("~@/assets/h4-bg.png");
        background-size: 100% 100%;
        &::before {
            content: "";
            width: 0.1rem;
            height: 0.18rem;
            background: #00a2ff;
            border-radius: 0.05rem;
            position: absolute;
            left: 0.1rem;
            top: 50%;
            transform: translateY(-50%);
        }
    }
    .container-body {
        width: 100%;
        padding: 0 0.1rem;
        margin-top: 0.16rem;
        display: flex;
        justify-content: space-between;
        &-left {
            //width: calc((100% - 8rem - 40px) * 0.531);
            width: calc((100% - 40px) * 0.291);
            & > div {
                background-image: url("~@/assets/echarts-bg.png");
                background-size: 100% 100%;
                background-position: center top;
                padding-top: 0.28rem;
                &.family,
                &.person {
                    height: 2.19rem;
                    ul {
                        display: flex;
                        justify-content: space-between;
                        flex-wrap: wrap;
                        li {
                            width: 50%;
                            margin-top: 0.12rem;
                            padding-left: 0.56rem;
                            color: #f5f5f5;
                            position: relative;
                            display: flex;
                            align-items: center;
                            span {
                                font-size: 0.14rem;
                                font-weight: normal;
                            }
                            font {
                                font-size: 0.24rem;
                            }
                            &::before {
                                content: "";
                                position: absolute;
                                left: 0.36rem;
                                top: 50%;
                                transform: translateY(-50%);
                                width: 0.08rem;
                                height: 0.08rem;
                                background: #999999;
                                border-radius: 50%;
                            }
                            &:hover {
                                background-image: url("~@/assets/shujutiao_3.png");
                                font {
                                    color: #ff3b5f;
                                }
                                &::before {
                                    background: #ff3b5f;
                                }
                            }
                        }
                    }
                }
                &.person {
                    height: 2.19rem;
                    margin-top: 12px;
                }
                &.left-view {
                    margin-top: 12px;
                    height: 6.5rem;
                    background-image: url("~@/assets/left-view.png");
                    background-size: 100% 100%;
                    .left-echarts {
                        width: 100%;
                        height: 5.6rem;
                    }
                }
            }
        }
        &-center {
            //width: 8rem;
            width: calc((100% - 40px) * 0.451);
            height: 100%;
            background-image: url("~@/assets/center-bg.png");
            background-size: 100% 100%;
            background-position: center top;
            .economy {
                padding-top: 0.27rem;
                &-view {
                    width: 100%;
                    height: 2.9rem;
                    padding: 0 0.3rem;
                    display: flex;
                    justify-content: space-between;
                    &-left,
                    &-right {
                        width: 50%;
                        height: 100%;
                    }
                }
            }
            .industry {
                &-view {
                    margin-top: 12px;
                    padding: 0 0.3rem;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    &-left,
                    &-right {
                        width: 30%;
                        height: 3.2rem;
                    }
                    &-center {
                        width: 35%;
                        height: 3.2rem;
                    }
                }
            }
            .project {
                margin-top: 12px;
                height: 3.92rem;
                .wrap {
                    display: flex;
                    justify-content: space-between;
                    padding: 0 0.65rem 0 0.26rem;
                    .tag {
                        margin-top: 0.34rem;
                        width: 1.6rem;
                        p {
                            font-size: 0.18rem;
                            font-weight: normal;
                            color: #f5f5f5;
                            text-align: center;
                        }
                        ul {
                            display: flex;
                            justify-content: center;
                            flex-direction: column;
                            align-items: center;
                            li {
                                margin-top: 0.1rem;
                                color: #f5f5f5;
                                display: flex;
                                flex-direction: column;
                                justify-content: center;
                                align-items: center;
                                padding: 0.08rem 0;
                                p {
                                    font-size: 0.24rem;
                                    text-align: center;
                                }
                                font {
                                    font-size: 0.14rem;
                                    text-align: center;
                                }
                                &.active {
                                    background-color: rgba(205, 205, 205, 0.2);
                                    color: #00a2ff;
                                    p {
                                        color: #00a2ff;
                                    }
                                }
                            }
                        }
                    }
                    .project-view {
                        width: 6.6rem;
                        height: 3.6rem;
                    }
                }
            }
        }
        &-right {
            //width: calc((100% - 8rem - 40px) * 0.468);
            width: calc((100% - 40px) * 0.257);
            height: 100%;
            .land,
            .food {
                width: 100%;
                height: 3.95rem;
                background-image: url("~@/assets/right-view.png");
                background-size: 100% 100%;
                padding-top: 0.28rem;
                ul {
                    display: flex;
                    justify-content: space-between;
                    flex-wrap: wrap;
                    margin-top: 0.2rem;
                    padding: 0 0.02rem;
                    li {
                        width: 50%;
                        height: 0.63rem;
                        color: #ffffff;
                        padding-left: 0.16rem;
                        background-image: url("~@/assets/shujutiao1.png");
                        display: flex;
                        align-items: center;
                        i {
                            width: 0.4rem;
                            height: 0.4rem;
                            margin-right: 0.26rem;
                            position: relative;
                            &::after {
                                content: "";
                                position: absolute;
                                right: -0.1rem;
                                top: 50%;
                                transform: translateY(-50%);
                                width: 0.01rem;
                                height: 0.44rem;
                                background: #777777;
                            }
                        }
                        div {
                            p {
                                font-size: 0.14rem;
                                font-weight: normal;
                                color: #f5f5f5;
                            }
                            h5 {
                                font-size: 0.18rem;
                                color: #f5f5f5;
                                font {
                                    font-size: 0.24rem;
                                    font-weight: normal;
                                    color: #00a2ff;
                                }
                            }
                        }
                        & + li {
                            margin-top: 0.3rem;
                        }
                        &:nth-child(2) {
                            margin-top: 0;
                        }
                        &:hover {
                            background-image: url("~@/assets/shujutiao_2.png");
                        }
                    }
                }
            }
            .land {
                ul {
                    li {
                        i {
                            background-repeat: no-repeat;
                            background-position: center;
                        }
                        &:nth-child(1) i {
                            background-image: url("~@/assets/icon/jsyd_1.png");
                            background-size: 100%;
                        }
                        &:nth-child(3) i {
                            background-image: url("~@/assets/icon/gd_1.png");
                        }
                        &:nth-child(4) i {
                            background-image: url("~@/assets/icon/gy_1.png");
                        }
                        &:nth-child(5) i {
                            background-image: url("~@/assets/icon/qt_1.png");
                        }
                        &:nth-child(2) {
                            margin-top: 0;
                            i {
                                background-image: url("~@/assets/icon/ld_1.png");
                            }
                        }
                        &:hover {
                            font {
                                color: #ff3b5f;
                            }
                            &:nth-child(1) i {
                                background-image: url("~@/assets/icon/jsyd_2.png");
                                background-size: 100%;
                            }
                            &:nth-child(3) i {
                                background-image: url("~@/assets/icon/gd_2.png");
                            }
                            &:nth-child(4) i {
                                background-image: url("~@/assets/icon/gy_2.png");
                            }
                            &:nth-child(5) i {
                                background-image: url("~@/assets/icon/qt_2.png");
                            }
                            &:nth-child(2) i {
                                background-image: url("~@/assets/icon/ld_2.png");
                            }
                        }
                    }
                }
            }
            .food {
                margin-top: 12px;
                ul {
                    li {
                        &:nth-child(1) i {
                            background-image: url("~@/assets/icon/lsmj_1.png");
                            background-size: 100%;
                        }
                        &:nth-child(3) i {
                            background-image: url("~@/assets/icon/scmj_1.png");
                        }
                        &:nth-child(4) i {
                            background-image: url("~@/assets/icon/yymj_1.png");
                        }
                        &:nth-child(5) i {
                            background-image: url("~@/assets/icon/mumj_1.png");
                        }
                        &:nth-child(6) i {
                            background-image: url("~@/assets/icon/ggmj_1.png");
                        }
                        &:nth-child(2) {
                            margin-top: 0;
                            i {
                                background-image: url("~@/assets/icon/xmsl_1.png");
                            }
                        }
                        &:hover {
                            font {
                                color: #ff3b5f;
                            }
                            &:nth-child(1) i {
                                background-image: url("~@/assets/icon/lsmj_2.png");
                                background-size: 100%;
                            }
                            &:nth-child(3) i {
                                background-image: url("~@/assets/icon/scmj_2.png");
                            }
                            &:nth-child(4) i {
                                background-image: url("~@/assets/icon/yymj_2.png");
                            }
                            &:nth-child(5) i {
                                background-image: url("~@/assets/icon/mumj_2.png");
                            }
                            &:nth-child(6) i {
                                background-image: url("~@/assets/icon/ggmj_2.png");
                            }
                            &:nth-child(2) i {
                                background-image: url("~@/assets/icon/xmsl_2.png");
                            }
                        }
                    }
                }
            }
            .house {
                margin-top: 12px;
                width: 100%;
                height: 3.01rem;
                background-image: url("~@/assets/right-view-buttom.png");
                background-size: 100% 100%;
                padding-top: 0.28rem;
                .house-view {
                    width: 100%;
                    height: 2.4rem;
                }
            }
        }
    }
}
</style>
